<template>
  <div class="main">
    <div class="beiJing">
      <!-- 导航栏 -->
      <nav-menu></nav-menu>
      <!-- 二楼图片 -->
      <div class="erLou">
        <div class="picture">
          <div class="bac">
            <img
              class="zp"
              src="https://www.hzsp.com/images/hubanner1.jpg"
              alt=""
            />
            <img
              class="img"
              src="https://www.hzsp.com/images/ntitle3.png"
              alt=""
            />
            <p>来探索你不知道的小秘密吧~</p>
          </div>

          <div class="zhe">
            <img src="https://www.hzsp.com/images/repeat/bor1.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 优惠活动跳转 -->
      <div class="center">
        <div class="youHui">
          <a href=""
            ><img src="https://www.hzsp.com/itemlist/images/i/home.png" alt=""
          /></a>
          <span>研学互动</span>
          <img
            class="jt"
            src="https://www.hzsp.com/itemlist/images/i/home2.png"
            alt=""
          />
          <span class="dwkt">动物课堂</span>
        </div>

        <!-- 绿色标题 -->

        <div class="greenTitle">
          <h3>
            <img
              src="https://www.hzsp.com/itemlist/images/zhua.png"
              alt=""
            />探索趣味动物百科
          </h3>
        </div>

        <div class="mainCard">
          <div class="card" v-for="item in data" :key="item.id">
            <div class="ig">
              <img
                :src="url+item.src"
                alt=""
              />
            </div>
            <div class="text">
              <p>{{item.title}}</p>
              <i></i>
              <span class="shij">{{item.time}}</span>
              <span class="wxzq">{{item.address}}</span>
              <ol>
                <li>{{item.tag}}</li>
              </ol>
              <span class="ydc"
                >{{item.text}}</span
              >
              <div class="lsjy">{{item.btn}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="footZhe">
        <img src="https://www.hzsp.com/images/repeat/bor2.png" alt="" />
      </div>

      <!-- 绿色购票卡片 -->
      <Food></Food>
      <!-- 底部 -->
      <Bot></Bot>
    </div>
  </div>
</template>

<script>
import NavMenu from "@/components/NavMenu.vue";
import Bot from "@/components/index/Bot.vue";
import Food from "@/components/index/Food.vue";
import Card from "@/components/index/Card.vue";
export default {
  components: { NavMenu, Bot, Food, Card },
  data() {
    return {
      data: {},
      url:'http://176.19.26.136:3000/'
    };
  },
  mounted() {
    this.axios.get("/v1/interactQuery").then((res) => {
      console.log(res);
      this.data = res.data.data;
    });
  },
};
</script>
<style lang="scss" scoped>
.main{

  overflow-x: hidden;
}
* {
  font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑,
    STHeiti, MingLiu;
}
p,
span {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

.card {
  height: 385.391px;
  overflow: hidden;
  margin-top: 30px;
  position: relative;
  left: 200px;
  .ig {
    width: 610px;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    float: left;
    img {
      width: 100%;
    }
  }
  .text {
    .lsjy {
      background: #a5651a;
      border-radius: 10px;
      background-size: 100% 100%;
      color: #fff;
      text-align: center;
      width: 200px;
      padding: 10px 0;
      position: relative;
      top: 10px;
    }
    .ydc {
      display: block;
      margin-bottom: 10px;
    }
    ol {
      overflow: hidden;
      list-style: none;
      li {
        margin: 6px 0 20px 0;
        float: left;
        padding: 4px 10px;
        display: block;
        background: #e5e5e5;
        margin-right: 10px;
        border-radius: 20px;
        font-size: 12px;
        padding: 6px 20px;
      }
    }
    box-sizing: border-box;
    padding: 50px 60px;
    width: 610px;
    background-color: #fff;
    float: left;
    border-radius: 0 20px 20px 0;
    .shij {
      line-height: 1.42857143;
      color: #333;
      font-size: 14px;

      display: block;
      margin-top: 30px;
    }
    .wxzq {
      font-size: 12px;
      margin-top: 8px;
      display: block;
    }
  }
  p {
    color: #353535;
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 20px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
  }
  i {
    height: 2px;
    width: 55px;
    display: block;
    background: #356a0b;
    font-style: normal;
  }
}

.center {
  width: 1500px;
  margin: 0 auto;
  position: relative;
  top: -100px;
}

.beiJing {
  background: url(https://www.hzsp.com/images/repeat/wen1.jpg);

  .erLou {
    .picture {
      .bac {
        position: relative;
        .img {
          position: absolute;
          top: 100px;
          left: 100px;
        }
        p {
          position: absolute;
          top: 220px;
          left: 110px;
          color: white;
          font-size: 33px;
        }
      }
      .zp {
        background-size: cover;
        width: 100%;
      }

      .zhe {
        img {
          transform: translate(0, -23px);
        }
      }
    }
  }

  .youHui {
    position: relative;
    bottom: 50px;
    left: 20px;
    span {
      margin: 20px;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑,
        STHeiti, MingLiu;
      font-size: 14px;
      color: #333;
    }
    .jt {
      position: relative;
      top: 8px;
    }
    .dwkt {
      position: relative;
      left: -15px;
    }
  }

  a {
    margin: 0 auto;
  }
}

.greenTitle {
  h3 {
    color: #2b4c1d;
    display: flex;
    justify-content: center;
    font-size: 42px;
  }
}

.footZhe {
  img {
    background-size: cover;
    width: 100%;
    transform: translate(0, 25px);
  }
}
</style>
